<template>
  <view class="news">
    <!-- 头部 -->
    <yHeader
      :current="5"
      :screenWidth="screenWidth"
      @Tabs="handleTabs"
      class="bg-white"
    ></yHeader>
    <!-- pv端内容 -->
    <view
      v-if="SizeChange.width > 480"
      class="__inner mb-3 bg-white p-4"
      style="box-sizing: border-box"
    >
      <view class="container">
        <el-button @click="back" style="position: absolute"
          >返回</el-button
        >
        <view class="content">
          <view class="left">
            <text class="title">{{ newsList.News_Name }}</text>
            <text v-html="newsList.News_Main" class="main"></text>
          </view>
          <view class="right">
            <view class="news-right">
              <view class="item">
                <view class="sTitle">企业销售top榜</view>
                <view class="nr">
                  <view
                    class="qyitem"
                    v-for="(item, index) in companyNameList.slice(0, 5)"
                    :key="index"
                    @click="
                      handleTabs(
                        '/pages/detail/enterprise-detail?id=E00000000000001'
                      )
                    "
                  >
                    <image
                      :src="Domain_Business + item.Enterprise_Logo"
                      mode="scaleToFill"
                    />
                    <view>
                     <view>{{ item.Enterprise_Name }}</view>
                     <view>销售额: {{ item.Amount }}元</view>
                    </view>
                    <view></view>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部 -->
    <yFooter Show :screenWidth="screenWidth"></yFooter>
  </view>
</template>

<script>
const app = getApp();
import yHeader from "@/components/yHeader.vue";
import yFooter from "@/components/yFooter.vue";
import yTable from "@/components/yTable.vue";
import { GoodsInquiryKey,getEnterpriseSalesRanking } from "@/api/information.js";
export default {
  components: {
    yHeader,
    yFooter,
    yTable,
  },
  data() {
    return {
		news:[],
      screenWidth: uni.getSystemInfoSync().windowWidth,
      ThemeColors: app.globalData.ThemeColors,
	  Domain_Business:app.globalData.Domain_Business,
      SizeChange: {
        height: "",
        width: "",
      },
      name: "[请登录]",
      active: 0,
      from: {
        Primary_Key_Name: "News_SerialNumber",
        Primary_Key: 0,
        Data: "news_info",
      },
      newsList: {},
      companyNameList: [],
    };
  },
  onShow() {
    window.addEventListener("resize", this.getSize());
	this.getNews()
  },
  methods: {
    handleTabs(url) {
      uni.navigateTo({
        url,
      });
    },
    getSize() {
      this.SizeChange.width = window.screen.width;
    },
    back() {
      uni.navigateBack();
    },
	getNews(){
		uni.request({
			url: 'https://3451m7y168.goho.co/sv01/GetRedis',
			header: {
				'Content-Type': 'application/x-www-form-urlencoded'
			},
			method: "POST",
			data:{
				Key:'zjl_reptile'
			},
			success: (res) => {
				console.log(res.data.Data);
				this.news = res.data.Data
			}
		})
	},
    async getData() {
      const res = await GoodsInquiryKey({
        data: this.from,
      });
      this.newsList = res[0];
      console.log(this.newsList);
    },
    async companyName() {
      const res = await getEnterpriseSalesRanking({
        data: {
          page: 1,
          limit: 5,
        },
      });
	  this.companyNameList = res.Data;
    },
  },
  onLoad(options) {
    this.from.Primary_Key = options.id;
  },
  created() {
    this.getData();
    this.companyName();
  },
};
</script>

<style lang="scss" scoped>
.news {
  background-color: #eaeaea;
}
.container {
  position: relative;
}
.sTitle {
  height: 34px;
  background-color: #fff;
  line-height: 30px;
  background-image: url();
  background-repeat: no-repeat;
  background-position: 0px 5px;
  background-size: 4px auto;
  position: relative;
  padding-left: 20rpx;
  border-bottom: 1px solid #dddddd;
  font-weight: bold;
  font-size: 45rpx;
}
.content {
  display: flex;

  .el-button {
    position: absolute;
  }
  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    // border: 1px solid red;
    margin: 0 20rpx 0 0;
    padding: 0 40rpx;
    box-sizing: border-box;
    .title {
      font-size: 60rpx;
      display: inline-block;
      font-weight: bold;
      text-align: center;
      width: 80%;
      margin: 0 0 40rpx 0;
    }
  }
  .right {
    display: flex;
    width: 700rpx;
    position: relative;
    // height: 2480rpx;
    .news-right {
      width: 700rpx;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      position: sticky;
      // background-color: yellow;
      z-index: 999; /* 根据需要设置合适的层级 */
      .item {
        font-size: 28rpx;

        .nr {
          padding: 10rpx 0 0 20rpx;

          .qyitem {
            margin: 0 0 15rpx 0;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #dddddd;
            padding: 10rpx;
            box-sizing: border-box;

            image {
              width: 100rpx;
              height: 100rpx;
              margin: 0 10rpx 0 0;
            }
          }
        }
      }
    }
  }
}
</style>